<template>
  <div v-if="storeInfo" class="store-good-wrap">
    <img @click="onClickLeft" class="left-arrow" :src="storeArrowBack" alt="">
    <img @click="handleCollect" class="store-collect-icon"
      :src="storeInfo.collect_status == 1 ? storeCollectOnIcon : storeCollectIcon" alt="">
    <img @click="menuShowChange" class="store-down-menu" :src="storeDownMenu" alt="">

    <!-- 下拉框 -->
    <div v-if="menuShow" class="menu-down-ul">
      <div @click="handleToHome" class="menu-down-li active-btn">
        <img class="menu-down-li-icon" :src="storeMenu1" alt="">
        <div class="menu-down-li-name">商户首页</div>
      </div>
      <div @click="handleToPayRecord" class="menu-down-li active-btn">
        <img class="menu-down-li-icon" :src="storeMenu2" alt="">
        <div class="menu-down-li-name">消费记录</div>
      </div>
      <div @click="handleToCollect" class="menu-down-li active-btn">
        <img class="menu-down-li-icon" :src="storeMenu3" alt="">
        <div class="menu-down-li-name">我的收藏</div>
      </div>
      <div @click="handleToReport" class="menu-down-li active-btn">
        <img class="menu-down-li-icon" :src="storeMenu4" alt="">
        <div class="menu-down-li-name">举报商家</div>
      </div>
    </div>

    <!-- 轮播区 -->
    <van-swipe class="my-swipe" :autoplay="6000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in storeInfo.banner_list" :key="index">
        <div :style='"background: url(" + item + ") no-repeat center"' class="banner-li">
        </div>
      </van-swipe-item>
    </van-swipe>


    <div class="good-data">
      <div class="good-name">{{ storeInfo.name }}</div>
      <div class="good-info-subsidy" v-if="storeInfo.labels.length > 0">
        <div class="good-info-subsidy-btn"
          :style="{ background: items.icon_type == 3 ? 'url(' + require('../../images/bg_butie.png') + ') no-repeat center' : items.bg_color, backgroundSize: 'cover', color: items.color, textIndent: items.icon_type == 3 ? '0.3rem' : '0.1rem' }"
          v-for="items, indexs in storeInfo.labels" :key="indexs">
          <img v-if="items.icon_type != 0 && items.icon_type != 3"
            :src="items.icon_type == 1 ? require('../../images/xiaofei.png') : items.icon_type == 2 ? require('../../images/huaduo.png') : ''"
            alt="">{{ items.name }}
        </div>
      </div>
      <div class="good-desc">
        <div class="good-desc-li">
          <div class="good-desc-status">{{ businessStatus }}</div>
          <div class="good-desc-time">{{ storeInfo.business_time }}</div>
        </div>

        <div class="good-desc-tag">
          <div v-for="(item, index) in storeInfo.tags" :key="index" class="good-desc-tag-li">{{ item }}</div>
        </div>
        <a :href="'tel:' + storeInfo.phone">
          <div class="store-tel">
            <img class="store-tel-icon" :src="storeInfoTel" alt="">
            <div class="store-tel-val">电话</div>
          </div>
        </a>

      </div>
      <div class="good-address">
        <div class="good-address-text">{{ storeInfo.region_name }}</div>
        <div class="good-address-distance">{{ storeInfo.distance_text }}</div>

        <div @click="sheetShow = true" class="good-location">
          <img class="store-tel-icon" :src="storeInfoLocation" alt="">
          <div class="store-tel-val">导航</div>
        </div>
      </div>
    </div>

    <!-- 推荐 -->
    <div v-if="storeInfo.product_list.length" class="recommend-box">
      <div class="recommend-box-title">推荐商品({{ storeInfo.product_list.length }})</div>
      <div class="recommend-good-scroll">
        <div v-for="(item, index) in storeInfo.product_list" :key="index" class="good-li">
          <div :style='"background: url(" + item.cover_url + ") no-repeat center"' class="good-li-cover"
            @click="handlePic(index)"></div>
          <div class="good-li-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div @click="handleToPay" class="buy-btn active-btn">在线买单</div>


    <!-- 导航 -->
    <van-action-sheet v-model="sheetShow" :actions="actions" cancel-text="取消" close-on-click-action
      @select="onSelect" />

  </div>
</template>

<script>
import { STORE_INFO } from '@/api/store';
import {
  storeInfoTel, storeLocationIcon, storeArrowBack,
  storeCollectIcon, storeCollectOnIcon, storeDownMenu,
  storeMenu1, storeMenu2, storeMenu3, storeMenu4,
  storeInfoLocation
} from '@/tool/static-img';
import { STORE_COLLECT } from '@/api/store';
import { ImagePreview } from 'vant';
export default {
  data() {
    return {
      storeInfoTel, storeLocationIcon, storeArrowBack,
      storeCollectIcon, storeCollectOnIcon, storeDownMenu,
      storeMenu1, storeMenu2, storeMenu3, storeMenu4,
      storeInfoLocation,
      id: this.$route.query.id,
      longitude: this.$route.query.longitude,
      latitude: this.$route.query.latitude,
      current: 0,
      storeInfo: null,
      businessStatus: '',
      menuShow: false,
      isPreviewVisible: false,
      // 导航
      sheetShow: false,
      previewImageUrl: {},
      actions: [
        {
          name: '高德地图'
        },
        {
          name: '百度地图'
        },
        {
          name: '腾讯地图'
        }
      ]
    }
  },
  created() {
    if (!this.isLogin()) {
      return
    }
    // 商家详情
    this.getInfoDetail();
    localStorage.removeItem('coupon')
  },
  filters: {
    kmFilter(val) {
      return (val / 1000).toFixed(1);
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    handlePic(index) {
      ImagePreview({
        images: [
        this.storeInfo.product_list[index].cover_url
        ],
      });
    },
    // 是否登录
    isLogin() {
      const token = localStorage.getItem('token');
      if (!token) {
        this.$router.push({
          name: 'login'
        })
        return false;
      }

      return true;
    },
    menuShowChange() {
      this.menuShow = !this.menuShow
    },
    // 商户首页
    handleToHome() {
      this.$router.push({
        name: 'store'
      })
    },
    // 消费记录
    handleToPayRecord() {
      this.$router.push({
        name: 'consumptionRecord',
        query: {
          storeId: this.storeInfo.id
        }
      })
    },
    // 去收藏
    handleToCollect() {
      this.$router.push({
        name: 'storeColllect'
      })
    },
    onSelect(item) {
      this.sheetShow = false;

      this.navToMap(this.storeInfo.region_name, item.name);
    },
    navToMap(name, type) {
      let self = this
      // const geocoder = new AMap.Geocoder({
      //   city: '全国',
      //   batch: true
      // });
      // geocoder.getLocation(name, function (status, result) {
      //   if (status === 'complete' && result.info === 'OK') {
      //     const location = result.geocodes[0].location;
      //     self.latitude = location.lat
      //     self.longitude = location.lng
      //   }
      // });//获取终点地址经纬度

      let url
      let lat, long
      const u = navigator.userAgent
      //判断ios
      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      //判断Android
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
      lat = self.storeInfo.latitude
      long = self.storeInfo.longitude
      if (isIOS) {
        switch (type) {
          case '百度地图': //百度地图
            url = `http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html`
            break
          case '高德地图': //高德地图
            url = `http://uri.amap.com/marker?position=${long},${lat}&name=${name}&src=mypage&coordinate=gaode&callnative=0`
            break
          case '腾讯地图': //腾讯地图
            url = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${lat},${long};addr:${name}`
            break;
          default:
            break
        }
      } else {
        switch (type) {
          case '百度地图': //百度地图
            url = `http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html`
            break
          case '高德地图': //高德地图
            url = `http://uri.amap.com/marker?position=${long},${lat}&name=${name}&src=mypage&coordinate=gaode&callnative=0`
            break
          case '腾讯地图': //腾讯地图
            url = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${lat},${long};addr:${name}`
            break;
          default:
            break
        }
      }

      console.log(url, '地图路径')
      window.location.href = url;
    },
    // 商家详情
    getInfoDetail() {
      this.$http.post(STORE_INFO, {
        id: this.id,
        longitude: this.longitude,
        latitude: this.latitude
      })
        .then(res => {
          const {
            data
          } = res;

          this.storeInfo = data;

          this.businessStatus = data.business_status == 1 ? '营业中' : '已打烊';
        })

    },
    // 收藏
    handleCollect() {
      this.$http.post(STORE_COLLECT + this.storeInfo.id)
        .then(res => {
          if (this.storeInfo.collect_status == 1) {
            this.$toast.success('取消收藏成功');
          } else {
            this.$toast.success('收藏成功');
          }

          // 商家详情
          this.getInfoDetail();
        })

    },
    // 举报商家
    handleToReport() {
      this.$router.push({
        name: 'storeReport',
        query: {
          store_id: this.storeInfo.id
        }
      })
    },
    // 在线买单
    handleToPay() {
      this.$router.push({
        name: 'storePay',
        query: {
          store_id: this.storeInfo.id
        }
      })
    }
  }

}

</script>
<style lang="scss">
.store-good-wrap {
  min-height: 100vh;
  background: #F5F5F5;

  .left-arrow {
    position: fixed;
    left: 0.32rem;
    top: 0.38rem;
    z-index: 1;
    width: 0.6rem;
    height: 0.6rem;
  }

  .store-collect-icon {
    position: absolute;
    top: 0.38rem;
    right: 1.24rem;
    width: 0.6rem;
    height: 0.6rem;
    z-index: 1;
  }

  .store-down-menu {
    position: absolute;
    top: 0.38rem;
    right: 0.32rem;
    width: 0.6rem;
    height: 0.6rem;
    z-index: 2;
  }

  .menu-down-ul {
    position: absolute;
    right: 0.32rem;
    top: 1.16rem;
    width: 2.3rem;
    height: 2.86rem;
    padding: 0.24rem 0.32rem;
    box-shadow: 0 0.02rem 0.08rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.16rem;
    box-sizing: border-box;
    background-color: #ffffff;
    z-index: 1;

    .menu-down-li {
      display: flex;
      align-items: center;
      margin-bottom: 0.24rem;

      &:last-child {
        margin-bottom: 0;
      }

      .menu-down-li-icon {
        width: 0.32rem;
        height: 0.32rem;
        margin-right: 0.12rem;
      }

      .menu-down-li-name {
        height: 0.4rem;
        line-height: 0.4rem;
        font-weight: 400;
        font-size: 0.28rem;
        color: #333333;
      }
    }
  }


  // .cover-box{
  //   width: 100%;
  //   height: 4.16rem;
  //   background-size: cover!important; 
  // }

  .my-swipe {
    width: 100%;
    height: 4.16rem;

    .banner-li {
      width: 100%;
      height: 100%;
      background-size: cover !important;
    }
  }


  .good-data {
    margin-bottom: 0.16rem;
    padding: 0.28rem 0.32rem;
    background: #ffffff;
    border-radius: 0.2rem 0.2rem 0 0;

    .good-name {
      max-width: 90%;
      margin-bottom: 0.2rem;
      font-family: PingFangSC, PingFang SC;
      line-height: 0.5rem;
      font-size: 0.36rem;
      font-weight: 600;
      color: #333333;
    }

    .good-desc {
      position: relative;

      .store-tel {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: 0.16rem;
        bottom: 0.2rem;

        .store-tel-icon {
          width: 0.32rem;
          height: 0.32rem;
          margin-bottom: 0.1rem;
        }

        .store-tel-val {
          line-height: 0.34rem;
          font-size: 0.24rem;
          font-weight: 400;
          color: #333333;
        }
      }

      .good-desc-li {
        display: flex;
        align-items: center;
        height: 0.4rem;
        line-height: 0.4rem;

        .good-desc-status {
          margin-right: 0.2rem;
          font-weight: 500;
          font-size: 0.28rem;
          color: #00BB29;
        }

        .good-desc-time {
          font-weight: 500;
          font-size: 0.28rem;
          color: #333333;
        }
      }

      .good-desc-tag {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        max-width: 5rem;
        margin-top: 0.2rem;

        .good-desc-tag-li {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 0.32rem;
          margin-bottom: 0.1rem;
          margin-right: 0.16rem;
          padding: 0 0.1rem;
          font-size: 0.2rem;
          font-weight: 400;
          color: #F32A23;
          border-radius: 0.04rem;
          background: rgba(243, 42, 35, 0.1);
        }
      }
    }

    .good-address {
      position: relative;
      margin-top: 0.06rem;
      padding-top: 0.2rem;
      border-top: 1px solid #F2F4F5;

      .good-address-text {
        width: 5.7rem;
        margin-bottom: 0.12rem;
        line-height: 0.34rem;
        font-weight: 500;
        font-size: 0.24rem;
        color: #333333;
      }

      .good-address-distance {
        height: 0.34rem;
        line-height: 0.34rem;
        font-weight: 400;
        font-size: 0.24rem;
        color: #999999;
      }

      .good-location {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: 0.16rem;
        top: 0.2rem;

        .store-tel-icon {
          width: 0.34rem;
          height: 0.34rem;
          margin-bottom: 0.1rem;
        }

        .store-tel-val {
          line-height: 0.34rem;
          font-size: 0.24rem;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  .recommend-box {
    padding-top: 0.28rem;
    padding-left: 0.32rem;
    background: #ffffff;

    .recommend-box-title {
      position: relative;
      height: 0.44rem;
      margin-bottom: 0.2rem;
      line-height: 0.44rem;
      font-size: 0.32rem;
      font-weight: 600;
      color: #333333;

      &::before {
        position: absolute;
        left: 0;
        bottom: 0;
        content: '';
        width: 1.68rem;
        height: 0.14rem;
        background: linear-gradient(90deg, #FD1A1A 0%, rgba(231, 1, 1, 0) 100%);
      }
    }
  }

  .recommend-good-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    &::-webkit-scrollbar-track {
      display: none;
    }

    &::-webkit-slider-thumb {
      display: none;
    }

    .good-li {
      flex-shrink: 0;
      margin-right: 0.08rem;

      &:last-child {
        margin-right: 0.32rem;
      }

      .good-li-cover {
        display: block;
        width: 2.12rem;
        height: 1.6rem;
        background-size: cover !important;
      }

      .good-li-name {
        max-width: 2.12rem;
        height: 0.4rem;
        padding-top: 0.12rem;
        padding-bottom: 0.32rem;
        line-height: 0.4rem;
        font-weight: 500;
        font-size: 0.28rem;
        color: #333333;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
  }

  .buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 0.8rem;
    margin: auto;
    margin-top: 0.56rem;
    font-size: 0.32rem;
    font-weight: 500;
    color: #ffffff;
    border-radius: 0.4rem;
    background: linear-gradient(135deg, #FF5851 0%, #E9011B 100%);
  }


  .good-info-subsidy {
    display: flex;
    // height: 0.36rem;
    margin-bottom: .2rem;

    .good-info-subsidy-btn {
      min-width: 2rem;
      // background: url("../../images/bg_butie.png") no-repeat center;
      // background: #00BB29;
      background-size: cover;
      margin-right: .1rem;
      // text-indent: .2rem;
      display: flex;
      align-items: center;
      // justify-content: center;
      height: 0.36rem;
      // padding: 0 0.12rem;
      font-weight: 400;
      font-size: 0.22rem;
      color: #fff;
      border-radius: 0.06rem;
      // border: 1px solid #FD1A1A;
      box-sizing: border-box;

      img {
        width: .32rem;
        height: .32rem;
      }
    }
  }

}
</style>